{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta name="HandheldFriendly" content="true">
    <link rel="shortcut icon" href="/favicon.ico">
    <!--添加开始  -->
    <meta name="renderer" content="webkit">
    <link rel="apple-touch-icon" href="/resources/img/binance_icon.png">
    <!--添加结束-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="/static/app/css/sm.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/common.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/index.css" rel="stylesheet" type="text/css">
    <script src="/static/app/js/jquery-2.2.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script src="/static/app/js/layer/layer.js"></script>
	<script src="/static/app/js/clipboard.min.js"></script>
	    <!-- 将canvas图片保存成图片 -->
    <script src="/static/app/js/canvas2image.js"></script>
    <script src="/static/app/js/base64.js"></script>
	<script>var page='assets';</script>
    <!-- add for app -->
    <script src="/static/app/js/common/common_func.js"></script>
    <script src="/static/app/js/component.js"></script>
    {% include 'show/common_define.html' %}
    <script type="text/javascript" src="{%url 'javascript-catalog' 'btc.js'%}"></script>
    <script src="/static/lib/csrf.js"></script>
    <title>{% trans '充值' %}</title>
    <!-- add for app end -->
</head>
<body>
<div id="market-app" class="page-container">
    <div class="page-content">
        <div class="page-view">
            <div class="deposit-details">
                <div class="content" id="products">
                    <div class="top_header">
                        <img src="/static//app//images/arrow_left.png" onclick="history.go(-1)" style="margin-left: 0.5rem; float: left; width: 16px; height: 26px" alt="">
                        <h4 style="text-align: center">充值<span @click="to_history(CoinDetail.coin_type)" style="float: right; margin-right: 0.5rem; color: #828a98; font-size: 18px; font-weight: normal">历史记录</span></h4>
                    </div>
					<div class="chooseSymbol" style="margin-top: 0.5rem"  v-on:click="openview()">
						<img class="symbol-pic" :src="CoinDetail.img"/>
						<p class="symbol-asset">
							{!CoinDetail.name_upper!}
							<img class="rowright"src="/static/app/images/rowright.png"></p>
					</div>
					<div class="deposit-address">
						<div class="b-address">
							<p class="label-address">BNB 充值地址</p>
							<p class="asset-address" id="address">{!depositAddress!}</p>
						</div>
						<ul class="b-address-option">
							<li class="copybtn" @click="copy()">
								<i class="font font-copy"></i>
								<p>复制地址</p>
							</li>
							<li class="QRcodebtn" @click="openQRcode()">
								<i class="font font-ewm"></i>
								<p>显示二维码</p>
							</li>
						</ul>
					</div>
                </div>

            </div>
        </div>
    </div>
		<div class="app_menu">
		<my-menu></my-menu>
	</div>
</div>
<script id="testbox" type="text/html">
<div  id="dataList">
	<div  class="search">
		<img src="/static/app/images/bigmirror.png"/>
		<input placeholder="搜索" style="caret-color: #F0B90B;"/>
		<span onclick="layer.closeAll();">取消</span>
	</div>
	<ul class="allsymbols">
		<li v-for="item in actData" v-on:click="select_coin(item.coin_type)">
			<p>
				<img :src="item.img"/>
				{!item.name_upper!}
				<span>({!item.full_name!})</span>
			</p>
		</li>
	</ul>
	</div>
</script>

<script id="QRcode" type="text/html">
	<div class="QRcode">
		<i class="font font-close close-popup" onclick="layer.closeAll();"></i>
		<p class="QRcodeadd">BNB 充值地址</p>
		<div class="QRcode-content">
			<div class="QRcode-img">
                <!-- <canvas id="cvs" width="200" height="200"></canvas> -->
                <img id="depositImg" width="200" height="200" src="" />
			</div>
            <p id="a1" class="address2">0x0ff2f3e2290d3a0149d5f4fffabc4d93e14458e9</p>

			<div class="row">
				<div class="col-100" style="margin-top: 0.5rem; background: #dcab37">
					<span style="color: #fff !important" class="button button-fill button-big copy-btn2 r-copy" onclick="copy2()">复制地址</span>
				</div>
				<!-- <div class="col-100" style="margin-top: 0.5rem">
					<a class="button button-fill button-big" id="Download" onclick="downQRcode()">保存二维码</a>
				</div> -->
			</div>
		</div>
	</div>
</script>
<script src="/static/app/js/deposit.js"></script>
<script>
function mytest(){
vue.$data.aa=33;
}
// function drawQRcode(){
// 	var canvas=document.getElementById("cvs");
// 	var image=new Image();
// 	image.src="";
// 	image.onload=function(){
// 	canvas.getContext("2d").drawImage(this, 0, 0,200,200);
// 	};

// 	//alert('33');
// }
$(function () {
    // drawQRcode();
})

		function copy2(){
				var clipboard2 = new ClipboardJS('.copy-btn2', {
					target: function(trigger) {
						//return trigger.nextElementSibling;
						return document.querySelector('.address2');
					}
				});
				//console.log(clipboard);
				clipboard2.on('success', function(e) {
					e.clearSelection();
					  layer.open({
						  type:0,
						content: '成功',
						className:'cgong',
						skin: 'msg',
						style: 'border:none; background-color:#fff; color:#333;width:115px;border-radius:0px',
						time: 2 //2秒后自动关闭
					});
				});

		}

</script>
<script>

function downQRcode(){
    var oCanvas = document.getElementById("cvs");
    /*自动保存为png*/
    // 获取图片资源
    var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
    saveFile(img_data1, 'qrcode.png');
}
// 保存文件函数
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>
</body>
</html>
